<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>用户基本信息</span>
        <div>
          <el-button class="button" type="primary" @click="dialogFormVisible1 = true">重置密码</el-button>
          <el-button class="button" type="primary" @click="dialogFormVisible2 = true">修改信息</el-button>
        </div>
      </div>
    </template>
    <div class="text">
      <p>{{ '员工姓名：' + selfInfo.name }}</p>
      <p>{{ '员工邮箱：' + selfInfo.email }}</p>
      <p>{{ '员工权限：' + roleName }}</p>
    </div>
  </el-card>

  <el-dialog v-model="dialogFormVisible1" title="重置密碼">
    <el-form ref="ruleFormRef1" :model="updPwd" :rules="rules1" status-icon>
      <el-form-item label="旧密码" :label-width="formLabelWidth" prop="oldpassword">
        <el-input v-model="updPwd.oldpassword" autocomplete="off" />
      </el-form-item>
      <el-form-item label="新密码" :label-width="formLabelWidth" prop="newpassword">
        <el-input v-model="updPwd.newpassword" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取消</el-button>
        <el-button type="primary" @click="submitForm1(ruleFormRef1)">确定</el-button>
      </span>
    </template>
  </el-dialog>

    <el-dialog v-model="dialogFormVisible2" title="修改信息">
    <el-form ref="ruleFormRef2" :model="updInfo" :rules="rules2" status-icon>
      <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
        <el-input v-model="updInfo.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="郵箱" :label-width="formLabelWidth" prop="email">
        <el-input v-model="updInfo.email" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取消</el-button>
        <el-button type="primary" @click="submitForm2(ruleFormRef2)">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, reactive, ref, toRefs } from '@vue/runtime-core'
import { useStore } from 'vuex'
import $http from '@/request/http'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { initPersonalData } from '@/type/personal'

const $store = useStore()

const data = reactive(new initPersonalData())
const { updPwd, updInfo, selfInfo } = toRefs(data)
data.selfInfo = $store.state.user.userInfo
const roleName = computed(() => (selfInfo.value.role === 1 ? '管理员' : '员工'))

const dialogFormVisible1 = ref<boolean>(false)
const dialogFormVisible2 = ref<boolean>(false)
const formLabelWidth = '80px'

const ruleFormRef1 = ref<FormInstance>()
const ruleFormRef2 = ref<FormInstance>()
const rules1 = reactive<FormRules>({
  oldpassword: [
    { required: true, message: '旧密码不能为空', trigger: 'blur' },
    { min: 6, max: 12, message: '密码长度在6-12位', trigger: ['blur', 'change'] },
  ],
  newpassword: [
    { required: true, message: '新密码不能为空', trigger: 'blur' },
    { min: 6, max: 12, message: '密码长度在6-12位', trigger: ['blur', 'change'] },
  ],
})
const rules2 = reactive<FormRules>({
  name: [
    { min: 2, max: 5, message: '姓名长度在2-5位', trigger: ['blur', 'change'] },
  ],
  email: [
    { type: 'email', message: '请输入正确邮箱格式', trigger: ['blur', 'change'] },
  ],
})

const submitForm1 = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    if (!valid) return ElMessage.error('表单验证不通过')
    const { data: res } = await $http.post('/api/employees/resetpwd', updPwd.value)
    if (res.status === 1) return ElMessage.error(res.message)
    ElMessage.success('重置成功')
    dialogFormVisible1.value = false
  })
}

const submitForm2 = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    if (!valid) return ElMessage.error('表单验证不通过')
    const { data: res } = await $http.post('/api/employees/edit', updInfo.value)
    if (res.status === 1) return ElMessage.error(res.message)
    ElMessage.success('重置成功')
    dialogFormVisible2.value = false
    $store.dispatch('user/initUserInfo')
    setTimeout(()=>data.selfInfo = $store.state.user.userInfo, 100)
  })
}
</script>

<style scoped lang="less">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
  font-size: 18px;
  .text {
    font-size: 14px;
    p {
      margin-bottom: 18px;
    }
  }
}
</style>
